<template>
  <!-- 企业信息 -->
  <view class="conter">
    <cc-goback title='企业信息' color="#fff"></cc-goback>
    <view class="navigation_head"></view>
    <!-- 第一个模块 -->
    <view class="card">
      <view class="card_a">
        <view class="card_aa card_word1">
          企业名称
        </view>
        <view class="card_ab card_word2">
          永利
        </view>
        <view class="card_ac card_word1">
          类&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp型
        </view>
        <view class="card_ad">
          普通
        </view>
      </view>
      <view class="card_a">
        <view class="card_aa card_word1">
          状&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp态
        </view>
        <view class="card_ab card_word2">
          报警
        </view>
        <view class="card_ac card_word1">
          联系方式
        </view>
        <view class="card_ad">
          18920029038
        </view>
      </view>
      <view class="card_a">
        <view class="card_aa card_word1">
          详细地址
        </view>
        <view class="card_ab card_word2">
          安徽省黄山市徽州区永川
        </view>
      </view>
    </view>
    <!-- 第二个 -->
    <view class="card">
      <view class="card_red">
        <view class="red_a">
          排口
        </view>
        <view class="red_b">
        </view>
        <view class="red_c">
          36mg/m³
        </view>
      </view>
      <view class="red_word">
        <view class="red_word1">
          <view class="word_a word_style1">
            234
          </view>
          <view class="word_a word_style2">
            流速（m/s）
          </view>
        </view>
        <view class="red_word1">
          <view class="word_a word_style1">
            125
          </view>
          <view class="word_a word_style2">
            温度（℃）
          </view>
        </view>
        <view class="red_word1">
          <view class="word_a word_style1">
            128
          </view>
          <view class="word_a word_style2">
            压力（pa）
          </view>
        </view>
      </view>
    </view>
    <!-- 第三个 -->
    <view class="card">
      <view class="card_red">
        <view class="red_a">
          厂界
        </view>
        <view class="red_bb">
        </view>
        <view class="red_c">
          36mg/m³
        </view>
      </view>
      <view class="red_word">
        <view class="red_word1">
          <view class="word_a word_style1">
            23
          </view>
          <view class="word_a word_style2">
            温度（℃）
          </view>
        </view>
        <view class="red_word1">
          <view class="word_a word_style1">
            125
          </view>
          <view class="word_a word_style2">
            湿度（%）
          </view>
        </view>
        <view class="red_word1">
          <view class="word_a word_style1">
            125
          </view>
          <view class="word_a word_style2">
            风速（m/s）
          </view>
        </view>
        <view class="red_word1">
          <view class="word_a word_style1">
            东南
          </view>
          <view class="word_a word_style2">
            风向
          </view>
        </view>
        <view class="red_word1">
          <view class="word_a word_style1">
            900
          </view>
          <view class="word_a word_style2">
            气压（pa）
          </view>
        </view>
      </view>
    </view>
    <!-- 第四个 -->
    <uni-card >
      <view class="change_head">
        最近24小时TOVC变化趋势
      </view>
        <view class="change_v">
          <view class="change_vv">
          </view>
          厂界
          <view class="change_vc">
          </view>
          排口
        </view>
        <view class="region">
          <echarts :option="option" style="height: 300px;" @click="echartsClick"></echarts>
        </view>
    </uni-card>
    <!-- 第五个 -->
    <view class="card_message">
      <view class="message_a">
        工况信息
      </view>
      <view class="message_b">
        <view class="message_ba">
        </view>
        <view class="message_bb">
          6号电机
        </view>
        <view class="message_bc message_color1">
          正常
        </view>
      </view>
      <view class="message_b">
        <view class="message_ba">
        </view>
        <view class="message_bb">
          7号电机
        </view>
        <view class="message_bc message_color2">
          异常
        </view>
      </view>
      <view class="message_b">
        <view class="message_ba">
        </view>
        <view class="message_bb">
          8号电机
        </view>
        <view class="message_bc message_color3">
          离线
        </view>
      </view>
    </view>
  </view>
</template>

<script>
   import echarts from '@/components/echarts/echarts.vue';
  export default {
    components: {
      echarts
    },
    data() {
      return {
        option: {
          xAxis: {
            type: 'category',
            data: ['6:00', '8:00', '10:00', '12:00', '14:00', '16:00']
          },
          yAxis: {
            type: 'value'
          },
          series: [{
              data: [720, 232, 188, 505, 110, 510],
              type: 'line',
              smooth: true,
              itemStyle: {
                color: {
                  type: 'linear',
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [{
                    offset: 0,
                    color: '#5B8FF9' // 0% 处的颜色
                  }, {
                    offset: 1,
                    color: '#FFFFFF' // 100% 处的颜色
                  }],
                  global: false // 缺省为 false
                }
              },
              lineStyle: {
                color: {
                  type: 'linear',
                  x: 0,
                  y: 0,
                  x2: 1,
                  y2: 1,
                  colorStops: [{
                    offset: 0,
                    color: '#5B8FF9' // 0% 处的颜色
                  }, {
                    offset: 0.5,
                    color: '#5B8FF9' // 0% 处的颜色
                  }, {
                    offset: 1,
                    color: '#5B8FF9' // 100% 处的颜色
                  }],
                  global: false // 缺省为 false
                }
              },
              areaStyle: {}
            },
            {
              data: [590, 212, 595, 200, 20, 190],
              type: 'line',
              smooth: true,
              itemStyle: {
                color: {
                  type: 'linear',
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [{
                    offset: 0,
                    color: '#FBC2EB' // 0% 处的颜色
                  }, {
                    offset: 1,
                    color: '#FFFFFF' // 100% 处的颜色
                  }],
                  global: false // 缺省为 false
                }
              },
              lineStyle: {
                color: {
                  type: 'linear',
                  x: 0,
                  y: 0,
                  x2: 1,
                  y2: 1,
                  colorStops: [{
                    offset: 0,
                    color: '#FBC2EB' // 0% 处的颜色
                  }, {
                    offset: 0.5,
                    color: '#FBC2EB' // 0% 处的颜色
                  }, {
                    offset: 1,
                    color: '#FBC2EB' // 100% 处的颜色
                  }],
                  global: false // 缺省为 false
                }
              },
              areaStyle: {}
            }
          ]
        }
      };
    },
    
    methods: {
     /**
      * 点击事件
      * @param {Object} params
      */
     echartsClick(params) {
       console.log('点击数据', params)
     },
    }
  }
</script>

<style lang="scss">
  .navigation_head{
    height: calc(88rpx + var(--status-bar-height));
  }
  .conter {
    width: 100%;
    // height: 1732rpx;
    background-color: #F7F7F7;
    overflow: hidden;
  }

  .card {
    margin: 20rpx auto;
    width: 704rpx;
    height: 240rpx;
    background-color: #fff;
    overflow: hidden;
  }

  .change_head {
    font-size: 28rpx;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #333333;
  } 
.change_v {
    display: flex;
    align-items: center;
    margin: 34rpx 0 0 30rpx;
    font-size: 22rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #8C8C8C;
  }
  
  .change_vv {
    width: 15rpx;
    height: 15rpx;
    margin-right: 16rpx;
    background-color: #5B8FF9;
    border-radius: 50%;
  }
  .change_vc {
    width: 15rpx;
    height: 15rpx;
    margin: 0 16rpx 0 36rpx;
    background-color: #FBC2EB;
    border-radius: 50%;
  }
  .region{
    transform: translateY(-10%);
  }
  .card_message {
    margin: 20rpx auto;
    width: 702rpx;
    height: 360rpx;
    background-color: #fff;
    overflow: hidden;
  }

  .card_word1 {
    font-size: 26rpx;
    font-family: PingFang-SC-Medium, PingFang-SC;
    font-weight: 500;
    color: #999999;
  }

  .card_word2 {
    font-size: 26rpx;
    font-family: PingFang-SC-Medium, PingFang-SC;
    font-weight: 500;
    color: #333333;
  }

  .card_a {
    display: flex;
    margin: 30rpx 0 0 30rpx;
  }

  .card_aa {
    margin: 0 30rpx;
  }

  .card_ab {
    margin-right: 118rpx;
  }

  .card_ac {
    margin-right: 41rpx;
  }

  .card_red {
    display: flex;
  }

  .red_a {
    font-size: 26rpx;
    font-family: PingFang-SC-Medium, PingFang-SC;
    font-weight: 500;
    color: #999999;
    margin: 54rpx 0 0 30rpx;
  }

  .red_b {
    width: 364rpx;
    height: 48rpx;
    background: linear-gradient(270deg, #FBC2EB 0%, #A6C1EE 100%);
    border-radius: 0px 4px 4px 0px;
    margin: 48rpx 0 0 30rpx;
  }

  .red_bb {
    width: 274rpx;
    height: 48rpx;
    background: linear-gradient(90deg, #68C4FF 0%, #3792FF 100%);
    border-radius: 0px 4px 4px 0px;
    margin: 48rpx 0 0 30rpx;
  }

  .red_c {
    font-size: 24rpx;
    font-family: PingFang-SC-Medium, PingFang-SC;
    font-weight: 500;
    color: #333333;
    margin: 55rpx 0 0 20rpx;
  }

  .red_word {
    display: flex;
    justify-content: space-around;
    margin-top: 29rpx;
  }

  .word_style1 {
    font-size: 28rpx;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #333333;
    text-align: center;
    margin-bottom: 11rpx;
  }

  .word_style2 {
    font-size: 22rpx;
    font-family: PingFang-SC-Medium, PingFang-SC;
    font-weight: 500;
    color: #999999;
    text-align: center;
  }

  .message_a {

    font-size: 26rpx;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #333333;
    margin: 29rpx 0 0 30rpx;
  }

  .message_b {
    position: relative;
    display: flex;
    align-items: center;
    margin-top: 45rpx;
  }

  .message_ba {
    width: 4rpx;
    height: 18rpx;
    background: #3792FF;
    margin-left: 30rpx;
  }

  .message_bb {
    font-size: 30rpx;
    font-family: PingFang-SC-Medium, PingFang-SC;
    font-weight: 500;
    color: #333333;
    margin-left: 10rpx;
  }

  .message_bc {
    position: absolute;
    right: 0;
    font-size: 30rpx;
    font-family: PingFang-SC-Medium, PingFang-SC;
    font-weight: 500;
    margin-right: 30rpx;
  }

  .message_color1 {
    color: #5B8FF9;
  }

  .message_color2 {
    color: #FF3B30;
  }

  .message_color3 {
    color: #999999;
  }
</style>
